/**
 * 个人账户页面
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Dimensions,
  Image,
  AsyncStorage,
} from 'react-native';

import { NavigationActions } from 'react-navigation';

import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import ImagePicker from 'react-native-image-picker';
import Button from 'react-native-button';
import Config from '../common/config';

let width = Dimensions.get('window').width;

let pickPhotoOptions = {
  title: '设置头像',
  cancelButtonTitle: "取消",
  chooseFromLibraryButtonTitle: "从相册选择",
  takePhotoButtonTitle: "拍照",
  allowsEditing: true,
  noData: false,
  storageOptions: {
    skipBackup: true,
    path: 'images'
  }
};

class Account extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      avatarSource: ""
    }
  }

  pickPhoto() {
    ImagePicker.showImagePicker(pickPhotoOptions, (response) => {
      console.log('Response = ', response);

      if (response.didCancel) {
        console.log('User cancelled image picker');
      }
      else if (response.error) {
        console.log('ImagePicker Error: ', response.error);
      }
      else if (response.customButton) {
        console.log('User tapped custom button: ', response.customButton);
      }
      else {
        let source = { uri: response.uri };

        // You can also display the image using data:
        // let source = { uri: 'data:image/jpeg;base64,' + response.data };

        this.setState({
          avatarSource: source
        });
      }
    });
  }

  doLogout() {
    console.log("doLogout...");
    var self = this;
    let tokenKey = Config.token_key;
    AsyncStorage.removeItem(tokenKey)
    .then(() => {
      console.log("set stat token = null");
      const resetAction = NavigationActions.reset({
        index: 0,
        actions: [
          NavigationActions.navigate({routeName: "Huanbao"}),
        ]
      })
      self.props.navigation.dispatch(resetAction);
    })
  }

  render() {
    return (
      <View style={styles.container}>
        {!this.state.avatarSource ?
        <TouchableOpacity style={styles.avatarBox} onPress={()=>this.pickPhoto()}>
          <Text style={styles.avatarTip}>上传头像</Text>
          <Icon name="plus" style={styles.uploadIcon} />        
        </TouchableOpacity>
        :
        <TouchableOpacity style={styles.avatarBox} onPress={()=>this.pickPhoto()}>
          <Text style={styles.avatarTip}>更换头像</Text>
          <Image source={this.state.avatarSource} style={styles.avatar} />      
        </TouchableOpacity>
        }
        <View style={styles.logoutBox}>
          <Button style={styles.btnLogout} onPress={this.doLogout.bind(this)}>退出</Button>
        </View>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center'
  },
  avatarBox: {
    justifyContent: 'center',
    height: 140,
    backgroundColor: '#ccc',
    width: width,
    alignItems: 'center',
  },
  avatarTip: {
    color: '#fff',
  },
  uploadIcon: {
    margin: 10,
    color: '#fff',
    fontSize: 30
  },
  avatarBackground: {
    height: 140,
  },
  avatar: {
    resizeMode: 'cover',
    width: width * 0.2,
    height: width * 0.2,
    borderRadius: width * 0.1,
    margin: 10,
  },
  logoutBox: {
    padding: 20,
    //backgroundColor: "#ddd",
    width: width,
  },
  btnLogout: {
    padding: 10,
    backgroundColor: "orange",
    color: "#fff",
    fontSize: 20,
    fontWeight: "600",
    borderColor: "orange",
  }

});

module.exports = Account;

